/* 二级路由 */

// 样式私有化处理  styled-components
import React from "react";
import styled from "styled-components";
import {titleSize, colorRed} from "./common"
import {Link} from "react-router-dom";
import routes from "../../router-v5/routes";
import RouterView from "../../router-v5/index.js"

import { useHistory,useLocation,useRouteMatch} from "react-router-dom";
/*
*   只要在<HashRouter>/<BrowserRouter>中演染的组件:
*       我们在组件内部，基于useHistory/useLocation/useRouteMatch这些Hook函数，就可以获取
* */

/* 编写组件的样式： 基于 css-in-js 思想中的 styled-components 插件 */
const MenuBox = styled.div`
  display: flex;
  justify-content: space-between;
  background: lightblue;
  width: 400px;

  .title {
    font-size: ${titleSize}px;
    line-height: 40px;

    &:hover {
      color: ${colorRed}
    }
  }
`

const Menu = function (props){
    console.log(props,333)
    let history =  useHistory(),location =useLocation(),match =  useRouteMatch()
    console.log(history)
    console.log(location)
    console.log(match)
    return <MenuBox>
        <div>
            <Link to="/a/a1" className="title">手机a</Link>
            <Link to="/a/a2" className="title">电脑a</Link>
            <Link to="/a/a3" className="title">家电a</Link>
        </div>
        <div>
            {/*A1组件的详细详细信息*/}
            <RouterView routes={routes[1].children}/>
        </div>
    </MenuBox>
}

export default Menu;